<template>
    <div class="content-item content-collection">
        <h2>Store page</h2>
        <UxLoading v-if="loading"></UxLoading>
        <p v-else-if="(collections || []).length == 0">
            <i class="iconfont icon-xiangqing1"></i> Please create at least one store page on Squarespace.
        </p>
        <el-select v-else v-model="active" clearable placeholder="Choose a store page" style="width: 360px">
            <el-option v-for="item in collections" :key="item.id" :label="item.title" :value="item.id" v-show="item.isEnabled"></el-option>
        </el-select>
    </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
export default {
    name: "SynchronizeCollection",
    props: {
        value: { type: [String, Number], default: () => '' },
    },
    data () {
        return {
            loading: true,
            collections: [],
        };
    },
    computed: {
        ...mapState("synchronize", {
            shop: "shop",
        }),

        active: {
            get () {
                return this.value
            },
            set (val) {
                this.$emit('input', val);
            }
        }
        // 分类
        // collection: {
        //     get () {

        //         const shop_type = this.shop.shop_type;

        //         if (shop_type == 1) {
        //             // shopify
        //             return this.setting.product_collection_id;
        //         } else if (shop_type == 2) {
        //             // etsy
        //         } else if (shop_type == 3 || shop_type == 5) {
        //             // wix || squarespace
        //             return this.setting.product_collection;
        //         } else if (shop_type == 4) {
        //             // woo
        //             return this.setting.product_collection_id;
        //         }
        //     },
        //     set (value) {

        //         const shop_type = this.shop.shop_type;

        //         if (shop_type == 1 && this.setting.product_collection_id != value) {
        //             // shopify
        //             this.setting.product_collection_id = value;
        //         } else if (shop_type == 2 && this.setting.product_collection_id != value) {
        //             // etsy
        //         } else if (shop_type == 3 || shop_type == 5 && this.setting.product_collection != value) {
        //             // wix || squarespace
        //             this.setting.product_collection = value;
        //         } else if (shop_type == 4 && this.setting.product_collection_id != value) {
        //             // woo
        //             this.setting.product_collection_id = value;
        //         }
        //     },
        // },
    },


    methods: {
        async getCollection () {

            //店铺名称
            this.loading = true;
            let res = await this.$http("UserStore.getCollection", {
                shop_id: this.shop.shop_id,
            });
            if (res.code == 0) {
                //成功获得类型
                this.loading = false;
                this.collections = res.data;
            } else {
                this.loading = false;
                this.$uxMessage.error(res.msg || "error");
            }
        },

        checkError () {
            if (!this.active) {
                this.$uxMessage.error({
                    message: "Please select at least one store page to display your product.",
                    duration: 5000,
                });
                return false;
            } else {
                return true;
            }
        },

    },
    created () {
        this.getCollection();
        this.$on('global:SYNCHRONIZE_CHECK', this.checkError)
    },
};
</script>
<style lang="scss" scoped>
.content-collection {
    position: relative;
    & > p {
        line-height: 36px;
        font-size: 14px;
    }
    .loading {
        position: relative;
        height: 36px;
        width: 360px;
    }
}
</style>
